<template>
  <header class="header fx-h-c b-c">
    <div class="input">
      <a-input
        placeholder="请输入文章标题..."
        class="inp"
        v-model="title"
        ref="inp"
      />
    </div>
    <div class="r fx-h-c">
      <Popover></Popover>
      <a-popover
        placement="bottom"
        trigger="click"
        v-model="visible"
        @click="handleClick"
        @visibleChange="visibleChange"
      >
        <template slot="content">
          <div class="content">
            <h2 class="post-title">发布文章</h2>
            <Sort></Sort>
            <div class="post clearfix m-t-2">
              <a-button type="primary" class="fr" @click="postArt"
                >确定并发布</a-button
              >
            </div>
          </div>
        </template>
        <div class="post-msg cs">
          <button class="post">发布文章</button>
          <a-icon :type="isDown ? 'down' : 'up'" />
        </div>
      </a-popover>
      <span class="avatar">
        <a-avatar icon="user" :src="$store.state.user.avatar" />
      </span>
    </div>
  </header>
</template>

<script>
import Popover from "@/components/article/Header/Popover";
import Sort from "@/components/article/Header/Sort";
import { add_article } from "@/api/article";
import { postArticle } from "@/utils/utils";
export default {
  name: "ArticleHeader",
  data() {
    return {
      title: "",
      article: "",
      article_html: "",
      article_img: "",
      tag: "",
      sort: "",
      isDown: false,
      visible: false,
      isFullEditor: false,
    };
  },
  components: {
    Popover,
    Sort,
  },
  methods: {
    // 发表文章
    postArt() {
      postArticle(this);
    },
    handleClick() {
      this.isDown = !this.isDown;
    },
    visibleChange(val) {
      this.isDown = val;
    },
  },
  created() {
    // 文章
    this.$bus.$on("articleChange", (val) => {
      this.article = val;
    });
    // 文章对应的markdown格式
    this.$bus.$on("articleHtmlChange", (val) => {
      this.article_html = val;
    });
    // 标题
    this.$bus.$on("titleFull", (title) => {
      this.title = title;
    });
    // 文章头图
    this.$bus.$on("article_img", (img) => {
      this.article_img = img;
    });
    // 文章标签
    this.$bus.$on("tag", (val) => {
      this.tag = val;
    });
    // 文章分类
    this.$bus.$on("sort", (val) => {
      this.sort = val;
    });

    this.$bus.$on("emitVisible", (type) => {
      this.visible = type;
    });
  },
  mounted() {
    // 自动获得焦点
    this.$refs.inp.focus();
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 6.4rem;
  width: 100%;
  justify-content: space-between;
  .input {
    width: 100rem;
    .inp {
      &:focus {
        border: none;
        box-shadow: none;
      }
      height: 100%;
      border: none;
      font-size: 2rem;
      font-weight: bold;
      color: #000;
    }
  }
  .r {
    width: 32rem;
    justify-content: space-around;
    .post-msg {
      color: #007fff;
    }
  }
}
.content {
  width: 26rem;
  padding: 2rem 0;
  .post-title {
    font-weight: bold;
    color: rgba(119, 127, 141, 0.8);
  }
}
</style>